<template>
  <div>
    <!-- 打开新增或编辑 -->
    <el-dialog width="60%" title="地址详情" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="newlist" :rules="rules" ref="ruleForm" style="padding: 30px 20px;">
        <el-row type="flex">
          <el-form-item label="发货地址" label-width="150px" prop="addressName" label-position="right">
            <el-input
              style="width:300px;"
              size="mini"
              v-model="newlist.addressName"
              autocomplete="off"
              placeholder="发货地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="发货人姓名" label-width="150px" label-position="right" prop="name">
            <el-input
              size="mini"
              style="width:300px;"
              v-model="newlist.name"
              autocomplete="off"
              placeholder="发货人姓名"
            ></el-input>
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-form-item label="发货人手机号" label-width="150px" label-position="right" prop="phone">
            <el-input
              style="width:300px;"
              size="mini"
              v-model="newlist.phone"
              autocomplete="off"
              placeholder="发货人手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮政编码" label-width="150px" label-position="right" prop="postCode">
            <el-input
              size="mini"
              style="width:300px;"
              v-model="newlist.postCode"
              autocomplete="off"
              placeholder="邮政编码"
            ></el-input>
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-form-item label="收货地址" label-width="150px" label-position="right" prop="cityCode">
            <el-cascader
              style="width:300px;"
              size="mini"
              :options="options"
              v-model="newlist.cityCode"
              @change="handleChange">
            </el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" label-width="150px" label-position="right" prop="detailAddress">
            <el-input
              size="mini"
              style="width:300px;"
              v-model="newlist.detailAddress"
              autocomplete="off"
              placeholder="详细地址"
            ></el-input>
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="是否默认收货地址" label-width="150px" label-position="right" prop="receiveStatus">
                <el-switch
                  v-model="newlist.receiveStatus"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否默认发货地址" label-width="150px" label-position="right" prop="sendStatus">
              <el-switch
                  v-model="newlist.sendStatus"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
            </el-form-item>
          </el-col>
        </el-row>



        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="newAddress()"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-card>
      <div slot="header">
        <el-button type="primary" @click="openDialog" size="mini"
          >新增</el-button
        >
      </div>
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="index" align="center" label="#" width="50">
        </el-table-column>

        <el-table-column
          prop="addressName"
          align="center"
          label="地址名称"
          width="250"
        >
        </el-table-column>

        <el-table-column label="默认发货地址" align="center" width="220">
          <template slot-scope="scope">
            <div>
              默认发货地址
              <el-switch
                v-model="scope.row.sendStatus"
                @change="changeSend(scope.row)"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          align="center"
          label="收货人姓名"
          width="200"
        >
        </el-table-column>

        <el-table-column
          prop="phone"
          align="center"
          label="收货人电话"
          width="180"
        >
        </el-table-column>

        <el-table-column align="center" label="收货人地址" width="300">
          <template slot-scope="scope">
            <div>
              {{ scope.row.province }}{{ scope.row.city }}{{ scope.row.region }}
            </div>
            <div>{{ scope.row.detailAddress }}</div>
          </template>
        </el-table-column>

        <el-table-column label="默认收货地址" align="center" width="180">
          <template slot-scope="scope">
            <div>
              默认收货地址
              <el-switch
                v-model="scope.row.receiveStatus"
                @change="changeReceive(scope.row)"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
          width="160"
        >
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="editAddress(scope.row.id)" type="text" size="small"
              >编辑</el-button
            >
            <el-button type="text" style="color: red" size="small" @click="delAddress(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  addressList,
  setReceiveOne,
  setSendOne,
  save,
  companyAddress,
  detailAddress,
  update
} from '@/api/order/adminAddress'
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
export default {
  data() {
    return {
      //地址列表数据
      list: [],
      //新增地址
      newlist: {
        addressName :'',
        city :'',
        cityCode :'',
        detailAddress :'',
        name :'',
        phone :'',
        postCode :'',
        province :'',
        receiveStatus :0,
        region :'',
        sendStatus :0
      },
      //dialog框是否显示
      dialogFormVisible: false,
      rules:{
        addressName:[
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },

      options: regionData,
      selectedOptions: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    //获取地址列表
    getData() {
      addressList().then((res) => {
        this.list = res.data.items
        console.log(res)
      })
    },
    //更改默认发货地址
    changeSend(val) {
      
      setSendOne({ id: val.id}).then((res) => {
        if (res.success) {
          
          this.$message.success('更改默认发货地址成功')
          this.getData()
        } else {
          this.$message.error('更改默认发货地址失败')
        }
      })
    },
    //更改默认收货地址
    changeReceive(val) {
      // val.receiveStatus=val.receiveStatus==0? 1:0
      setReceiveOne({ id: val.id }).then((res) => {
        if (res.success) {
          this.$message.success('更改默认收货地址成功')
          this.getData()
        } else {
          this.$message.error('更改默认收货地址失败')
        }
      })
      
    },
    //打开新增或编辑
    openDialog() {
      this.dialogFormVisible = true
    },
    //省市区选择器
    handleChange (value) {
      this.newlist.province  = CodeToText[value[0]]
      this.newlist.city  = CodeToText[value[1]]
      this.newlist.region   = CodeToText[value[2]]
    },
    // 新增地址
    newAddress(){
      this.newlist.cityCode = this.newlist.cityCode.join(",")
      if(this.newlist.id){
        update(this.newlist).then(res=>{
          if(res.success){
            this.$message.success("编辑地址成功")
            this.dialogFormVisible = false
            this.$refs.ruleForm.resetFields();
            this.getData()
          }else{
            this.$message.error("编辑地址失败")
          }
        })
      }else{
        save(this.newlist).then(res=>{
          if(res.success){
            this.$message.success("新建地址成功")
            this.dialogFormVisible = false
            this.$refs.ruleForm.resetFields();
            this.getData()
          }else{
            this.$message.error("新建地址失败")
          }
        })
      }
      
      
    },
    //编辑地址
    editAddress(val){
      detailAddress(val).then(res=>{
        // console.log(res);
        res.data.address.cityCode = res.data.address.cityCode.split(',')
        this.newlist = res.data.address
        this.dialogFormVisible = true
      })
    },
    //删除地址
    delAddress(val){
      companyAddress(val).then(res=>{
        console.log(res);
        if(res.success){
          this.$message.success("删除成功")
          this.getData()
        }
      })
     
    },
    //关闭弹窗的回调函数
    handleClose(){
      console.log(1);
      this.$refs.ruleForm.resetFields();
      this.newlist= {
        addressName :'',
        city :'',
        cityCode :'',
        detailAddress :'',
        name :'',
        phone :'',
        postCode :'',
        province :'',
        receiveStatus :0,
        region :'',
        sendStatus :0,
        id:''
      }
      
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss">
.el-table__row{
  height: 113px;
}
</style>
<style lang="scss" scoped>

</style>